<template>
  <div class="page_padding out_main">
    <div class="notice_con" v-if="pageShow">
      <van-tabs
        @click="onTabsClick"
        class="cont-tab"
        v-model="firstType"
        :sticky="true"
        line-width="35"
        line-height="2"
        title-active-color="#d80a06"
        title-inactive-color="#333333"
        border
        swipeable
        :ellipsis="false"
        :class="boardTabsData.length == 1 ? 'out-main-width1' : 'out-main-width2'">
        <van-tab v-for="tab in boardTabsData" :key="tab.id" :title="tab.name" :name="tab.id"></van-tab>
      </van-tabs>
      <template>
        <expense-list :userType="userType" :firstType="firstType"></expense-list>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import expenseList from './components/expenseList'
export default {
  name: 'expenseManage',
  components: {
    expenseList,
  },
  data() {
    return {
      userInfo: JSON.parse(localStorage.userInfo),
      firstType: '1',

      boardTabsData: [
        { name: '出差审批表', id: '1' },
        { name: '差旅费报销单', id: '2' },
      ],
      userType: '1', // 1.申报人；2.蒋林冬；3.局领导；4:出差审核;5:差旅审核
      tabList: [],
      buttonList: [],
      pageShow: false,
    }
  },
  computed: {
    ...mapGetters('role', [
      'isOtherRole',
      'isNormalRole',
      'isOrgRole',
      'isPartRole',
      'isReimburseRole',
      'isBusinessRole',
    ]),
  },
  created() {
    this.setTabs()
  },
  mounted() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    onTabsClick() {
      this.$store.state.pageTabTwo = this.$route.path + this.firstType
    },
    setTabs() {
      const arr = []
      if (this.isOtherRole || this.isNormalRole) {
        arr.push({ name: '出差审批表', id: '1' }, { name: '差旅费报销单', id: '2' })
      }
      if (this.isOrgRole || this.isPartRole) {
        arr.unshift(
          { name: '出差前审核', id: '3' },
          { name: '差旅费审核', id: '4' },
          { name: '出差审批表', id: '1' },
          { name: '差旅费报销单', id: '2' }
        )
        this.userType = '4'
      }
      if (this.isReimburseRole) {
        arr.unshift({ name: '差旅费审核', id: '4' })
        this.userType = '5'
      }

      if (this.isBusinessRole) {
        arr.unshift({ name: '出差前审核', id: '3' })
        this.userType = '4'
      }
      this.boardTabsData = Array.from(new Set(arr.map(JSON.stringify))).map(JSON.parse)
      const routeLength = this.$route.path.length
      if (this.$store.state.pageTabTwo.substring(0, routeLength) === this.$route.path) {
        this.firstType = this.$store.state.pageTabTwo.substring(this.$route.path.length)
      } else {
        this.firstType = this.boardTabsData[0].id
      }
      this.pageShow = true
    },
  },
}
</script>

<style lang="scss" scoped>
.out_main {
  padding-top: 0 !important;
  /deep/ .van-popup {
    position: absolute;
  }
}
.out-main-width1 {
  width: 50%;
}
.out-main-width2 {
  width: 100%;
}
.notice_con {
  padding: 3px 0 10px;
  width: 100%;
  .cont-tab {
    height: 100%;
    /deep/.van-tabs__wrap {
      height: 36px;
      background: #fff;
      // margin-bottom: 10px;
      border-bottom: 1px solid #efefef;
      .van-tab--active {
        .van-tab__text {
          font-size: 15px !important;
        }
      }
    }
  }
}
</style>
